<template>
   <div class="table">
    <van-nav-bar :title="TitleName" class="nvaList" fixed placeholder>
        <!-- 返回首页 -->
      <template #left class="left">
        <van-icon name="home-o" size="28px" color="#5e5e5d" @click="left" />
      </template>
      <template #right class="right">
        <!-- 搜索和购物车 -->
        <van-icon name="search" size="28px"  color="#5e5e5d" @click="search" />
        <van-icon name="shopping-cart-o" size="28px"  color="#5e5e5d" @click="cart" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  props:['TitleName'],
  methods: {
  left(){
    this.$router.replace('/home')
  },
  cart(){
    this.$router.replace('/shopcart')
  },
  search(){
    this.$router.push('/search')
  },
},
}
</script>

<style lang="less" scoped>
    .table{
      position: relative;
      z-index: 99;
      ::v-deep .nvaList{
        padding: 0 13px;
        background-color: #fafaf7;
        height: 50px;
        .van-nav-bar__content{
            height: 50px;
            margin: 0 13px;
          .van-nav-bar__left{
            padding: 0;
          }
          .van-nav-bar__right{
            padding: 0;
            width: 70.5px;
            justify-content: space-between;
          }
          .van-nav-bar__title{
            font-size: 18px;
          }
        }
        }
    }
</style>
